<template>
<div>
    <span class="musicspan">
        <a class="el-icon-caret-right musicplay" href="javascript:;" @click="playmusic" title="播放背景音乐">
            <audio src="/static/TheDawn.mp3" type="audio/mp3" id="bgMusic" preload="auto" ></audio>
        </a>
    </span>
    <ul class="music">
        <li class="m1"></li>
        <li class="m2"></li>
        <li class="m3"></li>
        <li class="m1"></li>
        <li class="m2"></li>
        <li class="m3"></li>
    </ul>
</div>
</template>
<script>
//musicplay musicplaying /static/TheDawn.mp3
  import $ from 'jquery'
  
  export default {
    data() {
      return {
        Valid: {
          name: "",
          password: "",
        },
        musicsrc:'',
        playstatus:false,
        initplayend:false,
      }
    },
    methods: {
      playmusic(){
        var bgm = document.getElementById('bgMusic');
        let that=this;
        if(this.initplayend==false){
          bgm.addEventListener("ended",function() {
            if(that.playstatus==true){
              let that2=this;
              setTimeout(() => {
                that2.play();
              }, 1000);
              
            }
          });
        }
        if(this.playstatus==false){
            this.playstatus=true;
            $('.musicplay').addClass('musicplaying');
            $('.music').show('normal');
            bgm.play();
        }
        else{
            this.playstatus=false;
            $('.musicplay').removeClass('musicplaying');
            $('.music').hide('normal');
            bgm.pause();
        }
      },
    }
}
</script>
<style >
.musicdisplay{
    position: absolute;
    right: 3px;
}
.musicspan{
  height: 24px;
  line-height: 24px;
  float: left;
}
.musicspan>a{
  display: block;
  width: 16px;
  height: 16px;
  overflow: hidden;
  background-repeat: no-repeat;
  text-decoration: none;
  margin-top: 3px;
}
.musicplaying{
    animation: playing 1s linear infinite;
}
@keyframes playing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.wrap{
    width: 26px;
    height: 15px;
    background-color: rgba(0,0,0,.5);
    float: right;
    display: none;
}
.music{
    display: inline-block;
    vertical-align: baseline;
    font-size: 0;
    margin-left: -40px;
    margin-top: 2px;
}
.music li{
    background-color: #5897cc;
    margin-left: 2px;
    display: inline-block;
    width: 2px;
    height: 15px;
}
.m1{
    animation: .8s .1s living linear infinite backwards normal;
}
.m2{
    animation: .8s .3s living linear infinite backwards normal;
}
.m3{
    animation: .8s .6s living linear infinite backwards normal;
}
@keyframes living{
    0%{
        transform:scaleY(1);
        transform-origin:0 15px}
    50%{
        transform:scaleY(.3);
        transform-origin:0 15px}
    100%{
        transform:scaleY(1);
        transform-origin:0 15px;
    }
}
</style>